<template>
  <CollapsePanel name="element-generations">
    <template #header> ElementGenerations </template>
    <p>collapse-title :title="$t('panel.ElementGenerations')"</p>
  </CollapsePanel>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { CollapsePanel } from 'ant-design-vue';

  import { mapState } from 'pinia';
  import modelerStore from '/@/store/modules/bpmnModeler';

  import { Base } from 'diagram-js/lib/model';
  import {
    getNameValue,
    setNameValue,
  } from '/@/components/BpmnChart/src/components/Panel/bo-utils/nameUtil';
  import { setIdValue } from '/@/components/BpmnChart/src/components/Panel/bo-utils/idUtil';
  import {
    getProcessExecutable,
    getProcessVersionTag,
    setProcessExecutable,
    setProcessVersionTag,
  } from '/@/components/BpmnChart/src/components/Panel/bo-utils/processUtil';
  import EventEmitter from '/@/utils/bpmn/EventEmitter';

  export default defineComponent({
    name: 'ElementGenerations',
    components: { CollapsePanel },

    data() {
      return {
        elementId: '',
        elementName: '',
        elementVersion: '',
        elementExecutable: true,
        isProcess: false,
      };
    },
    computed: {
      ...mapState(modelerStore, ['getActive', 'getActiveId']),
    },
    mounted() {
      this.reloadGenerationData();
      EventEmitter.on('element-update', this.reloadGenerationData);
    },
    methods: {
      reloadGenerationData() {
        this.isProcess = !!this.getActive && this.getActive.type === 'bpmn:Process';
        this.elementId = this.getActiveId as string;
        this.elementName = getNameValue(this.getActive as Base) || '';
        if (this.isProcess) {
          this.elementExecutable = getProcessExecutable(this.getActive as Base);
          this.elementVersion = getProcessVersionTag(this.getActive as Base) || '';
        }
      },
      updateElementName(value: string) {
        setNameValue(this.getActive as Base, value);
      },
      updateElementId(value: string) {
        setIdValue(this.getActive as Base, value);
      },
      updateElementVersion(value: string) {
        const reg = /((\d|([1-9](\d*))).){2}(\d|([1-9](\d*)))/;
        if (reg.test(value)) {
          setProcessVersionTag(this.getActive as Base, value);
        } else {
          // window.__messageBox.error('版本号必须符合语义化版本2.0.0 要点')
        }
      },
      updateElementExecutable(value: boolean) {
        setProcessExecutable(this.getActive as Base, value);
      },
    },
  });
</script>
